<template>
<div id="app">
  <transition
    name="fade"
  >
    <refund-modal v-show="modal.refund" />
  </transition>
  <top />
  <nav-bar />
  <div class="base_main basefix">
    <crumbs />
    <div class="con_box_nopad">
      <refund-banner />
      <placeholder-info />
      <payment-show />
      <payment-info />
      <operation />
    </div>
  </div>
</div>
</template>

<script>
import store from './vuex/store'
import Top from './components/Top.vue'
import NavBar from './components/NavBar.vue'
import PlaceholderInfo from './components/PlaceholderInfo.vue'
import Crumbs from './components/Crumbs.vue'
import RefundBanner from './components/RefundBanner.vue'
import Operation from './components/Operation.vue'
import PaymentShow from './components/PaymentShow.vue'
import PaymentInfo from './components/PaymentInfo.vue'
import RefundModal from './components/RefundModal.vue'
import ApplySupplementModal from './components/ApplySupplementModal.vue'
import client from './utils/client'
import * as types from './vuex/mutation-types'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'app',
  components: {
    Top,
    NavBar,
    PlaceholderInfo,
    Crumbs,
    RefundBanner,
    Operation,
    PaymentShow,
    PaymentInfo,
    RefundModal,
    ApplySupplementModal,
  },
  store,
  computed: {
    ...mapGetters({
      'modal': 'getModal'
    }),
    fadeInUpBig() {
      return 'animated fadeInUpBig'
    },
    fadeOutDownBig() {
      return 'animated fadeOutDownBig'
    }
  },
  mounted() {
    client.get('/order')
      .then(response => response.data)
      .then(data => {
        const { commit } = this.$store
        commit(types.UPDATE_ORDER, { order: data.OrderInfo })
        commit('updateInstalments', { instalments: data.InstallmentPhaseList} )
      })
  },
}
</script>

<style>
@import 'assets/style.css';
</style>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

<style scoped>
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpBig {
  animation-name: fadeInUpBig;
  /* custom animation duation time to override the default animated animation-duration property */
  animation-duration: .75s;
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}
</style>